<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/system.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>系统设置</title>
    <style>
        .close-my {
            width: 70%;
            margin: 25px 15%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 0;
            background: #7b7878;
            font-size: 15px;
            letter-spacing: 3px;
            color: white;
            font-weight: 800;
            border-radius: 5px;
        }
        /*  我的板块里面的退出账号的提示弹窗 */
        
        .close-user-wrap {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 100;
            box-sizing: border-box;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .close-user-content {
            width: 70%;
            padding: 20px;
            background: white;
            border-radius: 8px;
        }
        
        .close-user-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 15px;
        }
        
        .close-user-content>p {
            padding: 30px 0;
            font-size: 14px;
            color: #999;
            text-align: center;
        }
        
        .close-user-content>button {
            width: 100%;
            padding: 8px 0;
            letter-spacing: 2px;
            color: white;
            background: #3574FA;
            border-radius: 8px;
            box-shadow: 1px 1px 10px RGBA(53, 116, 250, 0.7);
        }
        /*  我的板块里面的退出账号的提示弹窗 */
    </style>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div class='jiazai' v-if='jiazai'>
            <img src="./img/jia-ani.gif" width="50px" height="50px">
        </div>
        <!-- 加载中动画 -->

        <!-- 退出账号提示弹窗 -->
        <div id='mask' @click='offCloseUser=false;' v-if='offCloseUser'></div>
        <transition enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'>
            <div class='close-user-wrap' v-if='offCloseUser' @click='offCloseUser=false;'>
                <div class='close-user-content' @click.stop=''>
                    <div class='close-user-title'>
                        <span style="opacity:0">1</span>
                        <span>退出账号</span>
                        <img @click='offCloseUser=false;' src="./img/close.svg" width="24px" height="24px">
                    </div>
                    <p>您是否确认退出账号？</p>
                    <button @click='sureCloseUser'>确认退出</button>
                </div>
            </div>
        </transition>
        <!-- 退出账号提示弹窗 -->

        <!-- 自定义键盘 -->
        <div id='mask' @click='oofTransiaction=false;offKeyWord=false;' v-if='oofTransiaction'></div>
        <transition enter-active-class='animated fadeIn' enter-active-class='animated fadeOut'>
            <div class='transaction-input-wrap' v-if='oofTransiaction' @click='oofTransiaction=false;offKeyWord=false;'>
                <div class='trans-pass-content' @click.stop=''>
                    <div class='trans-hea'>
                        <span style="opacity:0">1</span>
                        <span>输入交易密码</span>
                        <img src="./img/close.svg" width="27px" height="27px" @click='oofTransiaction=false;offKeyWord=false;'>
                    </div>
                    <div class='trans-num' @click='openKeyWord'>
                        <span ref='input1'></span>
                        <span ref='input2'></span>
                        <span ref='input3'></span>
                        <span ref='input4'></span>
                        <span ref='input5'></span>
                        <span ref='input6'></span>
                    </div>
                    <button class='btn-com' @click='clkSubmit'>确认提交</button>
                </div>
            </div>
        </transition>
        <transition enter-active-class='animated fadeInUp' enter-active-class='animated fadeOutDown'>
            <div class="keyborad" v-if='offKeyWord'>
                <ul>
                    <li>
                        <dt @click="clkValue('1')">1</dt>
                        <dt @click="clkValue('2')">2</dt>
                        <dt @click="clkValue('3')">3</dt>
                    </li>
                    <li>
                        <dt @click="clkValue('4')">4</dt>
                        <dt @click="clkValue('5')">5</dt>
                        <dt @click="clkValue('6')">6</dt></li>
                    <li>
                        <dt @click="clkValue('7')">7</dt>
                        <dt @click="clkValue('8')">8</dt>
                        <dt @click="clkValue('9')">9</dt></li>
                    <li>
                        <dt @click="clkValue('.')">.</dt>
                        <dt @click="clkValue('0')">0</dt>
                        <dt @click="hide" class="iconfont icon-jianpanxiahua" style="display:flex; justify-content: center; align-item:center;">
                            <img src="./img/key-down.svg">
                        </dt>
                    </li>
                </ul>
                <div id="del" @click="del" class="del iconfont icon-jianpan_shanchu" style="display:flex; justify-content: center; align-item:center;">
                    <img src="./img/key-del.svg">
                </div>
                <div id="btn" class="button" @click="clkSubmit">
                    提交
                </div>
            </div>
        </transition>
        <!-- 自定义键盘 -->

        <!-- 自定义键盘 --输入验证码-->
        <div id='mask' @click='oofTransiactionInvi=false;offKeyWordInvi=false;' v-if='oofTransiactionInvi'></div>
        <transition enter-active-class='animated fadeIn' enter-active-class='animated fadeOut'>
            <div class='transaction-input-wrap' v-if='oofTransiactionInvi' @click='oofTransiactionInvi=false;offKeyWordInvi=false;'>
                <div class='trans-pass-content' @click.stop='' style="height:230px;">
                    <div class='trans-hea'>
                        <span style="opacity:0">1</span>
                        <span>输入验证码</span>
                        <img src="./img/close.svg" width="27px" height="27px" @click='oofTransiactionInvi=false;offKeyWordInvi=false;'>
                    </div>
                    <div class='input-invi'>
                        <span v-text='JSON.parse(localStorage.getItem("user")).phone'>
                            154-415-12454
                        </span>
                        <span @click='sendInvi'>{{surplusTime}} <span v-if='surplusTime!="重新发送"'>秒</span> </span>
                    </div>
                    <div class='trans-num' @click='openKeyWordInvi'>
                        <span ref='input1'></span>
                        <span ref='input2'></span>
                        <span ref='input3'></span>
                        <span ref='input4'></span>
                        <span ref='input5'></span>
                        <span ref='input6'></span>
                    </div>
                    <button class='btn-com' @click='clkSubmitInvi'>确认提交</button>
                </div>
            </div>
        </transition>
        <transition enter-active-class='animated fadeInUp' enter-active-class='animated fadeOutDown'>
            <div class="keyborad" v-if='offKeyWordInvi'>
                <ul>
                    <li>
                        <dt @click="clkValueInvi('1')">1</dt>
                        <dt @click="clkValueInvi('2')">2</dt>
                        <dt @click="clkValueInvi('3')">3</dt>
                    </li>
                    <li>
                        <dt @click="clkValueInvi('4')">4</dt>
                        <dt @click="clkValueInvi('5')">5</dt>
                        <dt @click="clkValueInvi('6')">6</dt></li>
                    <li>
                        <dt @click="clkValueInvi('7')">7</dt>
                        <dt @click="clkValueInvi('8')">8</dt>
                        <dt @click="clkValueInvi('9')">9</dt></li>
                    <li>
                        <dt @click="clkValueInvi('.')">.</dt>
                        <dt @click="clkValueInvi('0')">0</dt>
                        <dt @click="hideInvi" class="iconfont icon-jianpanxiahua" style="display:flex; justify-content: center; align-item:center;">
                             <img src="./img/key-down.svg">
                         </dt>
                    </li>
                </ul>
                <div id="del" @click="delInvi" class="del iconfont icon-jianpan_shanchu" style="display:flex; justify-content: center; align-item:center;">
                    <img src="./img/key-del.svg">
                </div>
                <div id="btn" class="button" @click="clkSubmitInvi">
                    提交
                </div>
            </div>
        </transition>
        <!-- 自定义键盘--输入验证码 -->

        <div class='notice-hea'>
            <img @click='close' src="./img/right-black.svg" width="20px" height="20px">
            <span>系统设置</span>
        </div>
        <div class='set-content-wrap'>
            <div class='set-list' @click='openTrans'>
                <span>导出私钥</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div class='set-list' @click='_openHref("safe-ar.html","safeAr")'>
                <span>安全保障</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div class='set-list' style="margin-bottom:0" @click='_openHref("add-address.html", "addAddress");'>
                <span>添加地址</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div style="height:20px;background:rgba(247,247,247,.2);box-shadow:0 0 10px #eee inset;"></div>
            <div class='set-list' style="margin-top:20px" @click='_openHref("set-login-password.html","setLoginPassword")'>
                <span>修改登陆密码</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div class='set-list' style="margin-bottom:0" @click='_openHref("set-trans-password.html","setTransPassword")'>
                <span>修改交易密码</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div style="height:20px;background:rgba(247,247,247,.2);box-shadow:0 0 10px #eee inset;"></div>
            <div class='set-list ' style="margin-top:20px" @click='_openHref("set-shou-pass-wrap.html","setShouPassWrap")'>
                <span>手势密码设置</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div class='set-list' @click='_openHref("edit-avatar.html","editAvatar")'>
                <span>头像设置</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <div class='set-list' @click='_openHref("introduce-we.html","introduce-we")'>
                <span>关于我们</span>
                <img src="./img/left.svg" width="25px" height="25px">
            </div>
            <button class='close-my animated' @click='closeUser'>
                <img style='margin-right:10px;' src="./img/switch.png" width="30px" height="30px">
                <span>退出账号</span> 
            </button>
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/back.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/base64.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                //控制自定义键盘弹窗(是输入交易密码的弹窗) 
                oofTransiaction: false,
                //控制退出账号弹窗
                offCloseUser: false,
                //控制自定义的键盘
                offKeyWord: false,
                //输入的6位数交易密码
                transPass: [],
                //控制自定义键盘弹窗(是输入交易密码的弹窗)-----导出私钥2-输入验证码
                oofTransiactionInvi: false,
                //控制自定义的键盘-----导出私钥2-输入验证码
                offKeyWordInvi: false,
                //输入的6位数交易密码-----导出私钥2-输入验证码
                transPassInvi: [],
                //私钥
                siyao: '',
                //剩余的时间秒数
                surplusTime: 60,
                //真实的验证码
                sureCode: '',
                setin: null
            },
            watch: {
                oofTransiaction: function(val) {
                    if (!val) {
                        this.transPass = [];
                    }
                }
            },
            methods: {
                close: function() {
                    var web = plus.webview.currentWebview();
                    web.close('none');
                },
                //打开输入交易密码界面
                openTrans: function() {
                    this.oofTransiaction = true;
                    var hei = ($(document).height() - 200) / 2;
                    setTimeout(function() {
                        $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                    }, 20);
                },
                //打开自定义键盘
                openKeyWord: function() {
                    if (this.offKeyWord) {
                        return;
                    }
                    var hei = $(document).height() - 470;
                    this.offKeyWord = true;
                    $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                },
                //退出账号弹窗开启
                closeUser: function() {
                    var el = $('.close-my');
                    el.addClass('bounceIn');
                    setTimeout(function() {
                        el.removeClass('bounceIn');
                    }, 700);
                    this.offCloseUser = true;
                },
                //确认退出账号
                sureCloseUser: function() {
                    this.offCloseUser = false;
                    localStorage.setItem('user', '');
                    localStorage.setItem('shouPassword', '');
                    var index = plus.webview.getWebviewById('index');
                    var curr = plus.webview.currentWebview();
                    index.hide();
                    setTimeout(function() {
                        index.close('none');
                        curr.hide();
                    }, 800);
                    _openHref('login.html', 'login');
                },
                //输入交易密码的值
                clkValue: function(val) {
                    if (val == '.') {
                        return;
                    }
                    var len = this.transPass.length;
                    if (len == 6) {
                        this.clkSubmit();
                        return;
                    }
                    var input = 'input' + (len + 1);
                    this.transPass.push(val);
                    this.$refs[input].innerHTML = val;
                    if (this.transPass.length == 6) {
                        this.clkSubmit();
                    }
                },
                //删除一个数值
                del: function() {
                    if (this.transPass.length == 0) {
                        return;
                    }
                    var len = this.transPass.length;
                    var input = 'input' + len;
                    this.$refs[input].innerHTML = '';
                    this.transPass.pop();
                },
                //自定义键盘的提交
                clkSubmit: function() {
                    if (this.transPass.length != 6) {
                        _toast('请输入正确的密码');
                        return;
                    }
                    //导出私钥  验证密码
                    var This = this;
                    This.surplusTime = 60;
                    This.transPassInvi = [];
                    clearInterval(This.setin);
                    this.jiazai = true;
                    _bas64Post(ZEXPORRTKEY, {
                        userid: JSON.parse(localStorage.getItem('user')).userid,
                        pin: this.transPass.join('')
                    }, function(data1) {
                        This.jiazai = false;
                        if (data1.status == 1) {
                            This.siyao = data1.back;
                            This.jiazai = true;
                            _post(SESSION_DUAN, {
                                session: JSON.parse(localStorage.getItem('user')).session
                            }, function(data) {
                                This.jiazai = false;
                                if (data.status == 1) {
                                    // This.sureCode = data.back;
                                    This.oofTransiaction = This.offKeyWord = false;
                                    This.transPass = [];
                                    This.openTransInvi();
                                } else {
                                    _toast(data.msg);
                                }
                            });
                        } else {
                            _toast(data1.msg);
                        }
                    });
                },
                //隐藏自定义键盘
                hide: function() {
                    this.offKeyWord = false;
                },
                //重新发送验证码
                sendInvi: function() {
                    if (this.surplusTime == '重新发送') {
                        var This = this;
                        this.jiazai = true;
                        _post(SESSION_DUAN, {
                            session: JSON.parse(localStorage.getItem('user')).session
                        }, function(data) {
                            This.jiazai = false;
                            if (data.status == 1) {
                                // This.sureCode = data.back;
                                This.surplusTime = 60;
                                This.setin = setInterval(function() {
                                    if (This.surplusTime-- <= 1) {
                                        clearInterval(This.setin);
                                        This.surplusTime = '重新发送';
                                    }
                                }, 1000);
                            } else {
                                _toast(data.msg);
                            }
                        });
                    }
                },
                //打开输入交易密码界面-----导出私钥2-输入验证码
                openTransInvi: function() {
                    this.oofTransiactionInvi = true;
                    var hei = ($(document).height() - 230) / 2;
                    setTimeout(function() {
                        $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                    }, 20);
                    var This = this;
                    This.setin = setInterval(function() {
                        if (This.surplusTime-- <= 1) {
                            clearInterval(This.setin);
                            This.surplusTime = '重新发送';
                        }
                    }, 1000);
                },
                //打开自定义键盘-----导出私钥2-输入验证码
                openKeyWordInvi: function() {
                    if (this.offKeyWordInvi) {
                        return;
                    }
                    var hei = $(document).height() - 500;
                    this.offKeyWordInvi = true;
                    $('.transaction-input-wrap').css('transform', "translateY(" + hei + "px)");
                },
                //输入交易密码的值-----导出私钥2-输入验证码
                clkValueInvi: function(val) {
                    if (val == '.') {
                        return;
                    }
                    var len = this.transPassInvi.length;
                    if (len == 6) {
                        this.clkSubmitInvi();
                        return;
                    }
                    var input = 'input' + (len + 1);
                    this.transPassInvi.push(val);
                    this.$refs[input].innerHTML = val;
                    if (this.transPassInvi.length == 6) {
                        this.clkSubmitInvi();
                    }
                },
                //删除一个数值-----导出私钥2-输入验证码
                delInvi: function() {
                    if (this.transPassInvi.length == 0) {
                        return;
                    }
                    var len = this.transPassInvi.length;
                    var input = 'input' + len;
                    this.$refs[input].innerHTML = '';
                    this.transPassInvi.pop();
                },
                //自定义键盘的提交-----导出私钥2-输入验证码
                clkSubmitInvi: function() {
                    var pass = this.transPassInvi.join('');
                    var This = this;
                    // if (this.transPassInvi.length != 6 || pass != this.sureCode) {
                    //     _toast('请输入正确的验证码');
                    //     return;
                    // }
                    this.jiazai = true;
                    _post(ZEXPORRTKEY2, {
                        userphone: JSON.parse(localStorage.getItem('user')).phone,
                        yzmcode: pass
                    }, function(data) {
                        This.jiazai = false;
                        if (data.status == 1) {
                            var web = _openHref('show-siyao.html', 'showSiyao');
                            setTimeout(function() {
                                web.evalJS("importSiYao('" + This.siyao + "','1')");
                            }, 200);
                            This.oofTransiactionInvi = This.offKeyWordInvi = This.oofTransiaction = This.offKeyWord = false;
                        } else {
                            _toast(data.msg);
                        }
                    });
                },
                //隐藏自定义键盘-----导出私钥2-输入验证码
                hideInvi: function() {
                    this.offKeyWordInvi = false;
                },
            }
        });
    </script>
</body>

</html>